<template>
  <div style="max-height: calc(100% - 50px);overflow: scroll;" class="fullMain">
<!--    <div class="tophead">-->
<!--      &lt;!&ndash; 首部导航栏 &ndash;&gt;-->
<!--      <NavigationOfCalendar :flagOfCalendar.sync='flagOfCalendar'></NavigationOfCalendar>-->
<!--    </div>-->
    <div class="main">
      <div style="position:fixed;top: 0;display: block;width:100%;z-index: 999" >
        <x-header :left-options="{backText: '',showBack: false}">
          待办查看
        </x-header>
      </div>
      <!-- 待办事项显示模块 -->
<!--      <div>-->
<!--        <panel></panel>-->
<!--      </div>-->
      <!-- 进行中的待办事项 -->
      <div style="padding-top: 50px;height: auto;">
        <h5 style="font-size: larger;margin: 5px 0 5px 20px;font-family: '微软雅黑 Light';font-weight: bold;"
            class="item_title">进行中</h5>
        <flexbox orient='vertical'>
          <flexbox orient='horizontal' v-for="(item, index) in ongoingList" :key="index">
            <flexbox @click.native.stop="jumpToDetailChangable(item)" class="item_box">
              <flexbox-item :span='1/3' class="itemLeft">
                <span style="position: absolute;top: 11px;left: 45px;color: #aecbfa;font-family: 'Roboto', sans-serif">{{index+1}}</span>
                <img src="~static/img/number.png" height="20" width="20"
                     style="position: absolute;top:40px;left: 40px"/>
              </flexbox-item>
              <flexbox-item>
                <span class="item_title">{{item.title}}</span>
                <!-- <p class="weui-media-box__desc" v-html="item.detail"></p> -->
              </flexbox-item>
            </flexbox>
          </flexbox>
        </flexbox>

        <!-- 已完成的待办事项 -->
        <h5 style="font-size: larger;margin: 5px 0 5px 20px;font-family: '微软雅黑 Light';font-weight: bold"
            class="item_title">已完成</h5>
        <flexbox orient='vertical'>
          <flexbox orient='horizontal' v-for="(item, index) in doneList" :key="index">
            <flexbox @click.native.stop="jumpToDetailUnchangable(item)" class="item_box">
              <flexbox-item :span='1/3' class="itemLeft">
                <span style="position: absolute;top: 11px;left: 45px;color: #aecbfa;font-family: 'Roboto', sans-serif">{{index+1}}</span>
                <img src="~static/img/number.png" height="20" width="20"
                     style="position: absolute;top:40px;left: 40px"/>
              </flexbox-item>
              <flexbox-item>
                <span class="item_title">{{item.title}}</span>
                <!-- <p class="weui-media-box__desc" v-html="item.detail"></p> -->
              </flexbox-item>
            </flexbox>
          </flexbox>
        </flexbox>
        <!-- 添加待办按钮 -->
        <el-button class="button"
                   type="primary"
                   icon="el-icon-plus"
                   @click="addTodo()"
                   circle></el-button>
      </div>

      <div style="height:15px"></div>
    </div>
  </div>
</template>
<script>
  import {
    Group,
    XHeader,
    Popup,
    Radio,
    Panel,
    Flexbox,
    FlexboxItem
  } from 'vux'
  import {mapState, mapActions} from 'Vuex'
  // import NavigationOfCalendar from 'components/Navigation/NavigationOfCalendar.vue'
  import todo from 'api/todo'

  export default {
    name: 'S_showAllTodos',
    components: {
      Group,
      XHeader,
      Popup,
      Radio,
      Panel,
      // NavigationOfCalendar,
      Flexbox,
      FlexboxItem,
    },
    data () {
      return {
        flagOfCalendar: 'S_showAllTodos',//顶部导航栏的标识
        ongoingList: [],
        doneList: [],
      }
    },
    computed: {
      ...mapState({
        todoUndone: state => state.todo.todoUndone,
        todoDone: state => state.todo.todoDone
      })
    },
    watch: {
      ongoingList (val) {
      },
      doneList (val) {
      },
    },
    mounted () {
      this.getInfoOfTodos()
    },
    methods: {
      ...mapActions('todo', [
        'setTodoUndone',
        'setTodoDone',
        'setTodoSelected',
        'init_page_view'
      ]),
      back () {
        this.$router.go(-1)
      },
      toMainView () {
        this.$router.push({name: 'S_mainview'})
      },
      async getInfoOfTodos () {
        //进行中的待办
        const resOfGetTodoUndone = await todo.getTodoUndone()
        console.log('进行中的', resOfGetTodoUndone)
        if (resOfGetTodoUndone.code === 1) {
          this.ongoingList = resOfGetTodoUndone.data
          this.setTodoUndone(resOfGetTodoUndone.data)
        }
        //已完成的待办
        const resOfGetTodoDone = await todo.getTodoDone()
        console.log('已完成的', resOfGetTodoDone)
        if (resOfGetTodoDone.code === 1) {
          this.doneList = resOfGetTodoDone.data
          this.setTodoDone(resOfGetTodoDone.data)
        }
      },
      addTodo () {
        this.setTodoSelected({})
        this.init_page_view(0)
        this.$store.state.isTag = true
        this.$store.state.isReport = false
        this.$store.state.isSchedule = false
        this.$router.push({name: 'S_collection_of_creation'})
      },
      // 点击待办事项，跳转到此事项详情页面（ongoingList）
      jumpToDetailChangable (item) {
        this.setTodoSelected(item)
        this.init_page_view(1)
        this.$store.state.isTag = true
        this.$store.state.isReport = false
        this.$store.state.isSchedule = false
        this.$router.push({name: 'S_collection_of_creation'})
      },
      // 点击待办事项，跳转到此事项详情页面（doneList）
      jumpToDetailUnchangable (item) {
        this.setTodoSelected(item)
        this.init_page_view(2)
        this.$store.state.isTag = true
        this.$store.state.isReport = false
        this.$store.state.isSchedule = false
        this.$router.push({name: 'S_collection_of_creation'})
      },
    },
  }
</script>
<style scoped>
  .item_box {
    border-radius: 5px;
    line-height: 30px;
    width: 100%;
    overflow: hidden;
    margin: 5px 5px 2px 5px;
    /*padding: 3px;*/
    background-color: #f9f9f9;
  }

  .itemLeft {
    padding-top: 5px;
    margin: auto auto;
    width: 75px;
    height: 75px;
    line-height: 42px;
    text-align: center;
    display: inline-block;
    position: relative;
  }

  .item_title {
    /*margin-bottom: 5px;*/
    letter-spacing: 0.5px;
    display: inline-block;
    text-align: left;
    font-size: 15px;
    /*font-weight: bold;*/
    color: rgb(101, 101, 101);
  }

  x-header {
    position: absolute;
  }

  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }

  .box-card {
    width: auto;
  }

  .button {
    position: fixed;
    padding: 20px;
    bottom: 5rem;
    right: 2rem;
  }

  .button >>> .el-icon-plus:before {
    content: "\E6D9";
    color: #f5f7fa;
    font-size: 25px;
    font-weight: bold;
  }

  .el-button--primary {
    color: #FFF;
    background-color: rgba(26, 188, 156, 0.6);
    border-color: rgba(26, 188, 156, 0.5);
  }

  .box-card {
    width: auto;
  }
</style>
